<template>
  <div class="shade" v-if="isShadeShow" data-aos="fade-left"></div>

  <div class="form" data-aos="fade-left" v-if="isShadeShow">
    <div class="form-title">
      新建项目
    </div>
    <el-scrollbar >
    <div class="leave-form">
      <el-form
          ref="ruleFormRef"
          style="max-width: 60vw"
          :model="pro_form"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          :rules="ruleFormRule"
          status-icon
      >
        <el-form-item label="项目名" class="el-form-items" prop="project_name">
          <el-input v-model="pro_form.project_name" style="width: 240px" placeholder="请填写项目名" />
        </el-form-item>
        <el-form-item label="负责人" class="el-form-items">
          <el-input v-model="pro_form.charge_person_name" style="width: 240px"  disabled/>
        </el-form-item>
        <el-form-item label="甲方对接人" class="el-form-items" prop="first_party">
          <el-input v-model="pro_form.first_party" style="width: 240px" placeholder="请填写项目甲方对接人" />
        </el-form-item>
        <el-form-item label="项目描述" class="el-form-items">
          <el-input v-model="pro_form.project_describe" style="width: 240px" placeholder="请填写项目描述" />
        </el-form-item>
        <div class="btn-box" style="margin-top: 3vh;margin-bottom: 3vh;">
          <el-button type="primary" @click="confirmCreate(ruleFormRef)">
            创建项目
          </el-button>
        </div>
      </el-form>
    </div>
    </el-scrollbar>
  </div>
  <div class="close-btn" @click="closeForm" data-aos="fade-left" v-if="isShadeShow">
    <span>关</span>
    <span>闭</span>
  </div>
</template>

<script setup>
import {ElButton, ElInput, ElForm, ElMessage, ElMessageBox, ElUpload, ElOption, ElFormItem, ElDatePicker} from "element-plus"
import {onMounted, reactive, ref, watch} from "vue"
import emitter from "@/lib/eventBus"
import {getTime} from "@/lib/utils"
import {create_pro, create_project} from "@/api/Project/index.js"


const emit = defineEmits(['reloadList'])
//遮罩层
const isShadeShow = ref(false)
//请假表单
let pro_form= reactive({
  project_name : '',
  charge_person : '',
  charge_person_name : '',
  first_party : '',
  project_describe : '',
})

//表单校验规则
const ruleFormRef = ref()

//表单校验规则
const ruleFormRule = reactive({
  project_name: [
    { required: true, message: '项目名不能为空', trigger: 'blur' },
  ],
  first_party: [
    { required: true, message: '项目甲方对接人不能为空', trigger: 'blur' },
  ],
})

//用户信息
let user_info
//遮罩层
const users = ref([])
//时间戳
let now


onMounted(()=>{
  getUserInfo()
  pro_form.charge_person_name = user_info.username
  pro_form.charge_person = user_info.id
  AOS.init()
  // 监听报销页面的显隐
  emitter.on('showFinance',() => {
    isShadeShow.value = true
  })
})

//获取用户信息
const getUserInfo = () => {
  user_info = JSON.parse(localStorage.getItem('syhyDocManSys'))
}


//遮罩层显隐
const show = () => {
  isShadeShow.value = !isShadeShow.value
}


//关闭、重置表单
const closeForm = () => {
  pro_form= {
    project_name : '',
    charge_person : '',
    first_party : '',
    project_describe : '',
  }
  isShadeShow.value = false
}

const confirmCreate = async (formEl) => {
  try {
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        if (!pro_form.project_name){
          ElMessage({
            message:'项目名不能为空',
            type:'warning'
          })
        } else if (!pro_form.charge_person){
          ElMessage({
            message:'负责人不能为空',
            type:'warning'
          })
        } else if (!pro_form.first_party){
          ElMessage({
            message:'甲方对接人不能为空',
            type:'warning'
          })
        } else {
          const confirmRes = await ElMessageBox.confirm(
              '创建后信息无法修改,确认创建?',
              '提示',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
              }
          )
          if (!confirmRes){
            return  ElMessage({
              type: 'info',
              message: 'Delete canceled',
            })
          } else {
            const {data:res} = await create_pro({
              projectName:pro_form.project_name,
              chargePerson:pro_form.charge_person,
              first_party:pro_form.first_party,
              describe:pro_form.project_describe ? pro_form.project_describe : null,
              charge_person_name:user_info.username
            })
            if (res.code === 200){
              isShadeShow.value = false
              emit('reloadList')
              return ElMessage({
                message:'创建成功!',
                type:'success'
              })
            }
          }
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  } catch (e) {
    console.log(e)
  }
}


defineExpose({
  show
})
</script>

<style scoped lang="less">
.create-box{
  height: 89%;
  width: 18%;
  margin-top: 1.5vh;
  margin-left: 4vw;
  background-color: rgba(250, 250, 250);
  border-radius: 10px;
  box-shadow: 0 0 5px 5px lightgray;
  border: 1px solid lightgray;
  .create_title{
    height: 5vh;
    border-bottom: 1px solid #d6d6d6;
    line-height: 5vh;
    text-align: left;
    padding-left: 1.5vw;
    box-sizing: border-box;
    font-size: 2vh;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .create_body{
    .body_item{
      margin-bottom: 1.5vh;
      .body_title{
        height: 5vh;
        border-bottom: 1px solid #ebebeb;
        text-align: left;
        line-height: 5vh;
        padding-left: 1.5vw;
        font-weight: 600;
        letter-spacing: 1px;
      }
      .items{
        display: flex;
        flex-wrap: wrap;
        .item{
          height: 8vh;
          border-right: 1px solid rgba(245, 245, 245);
          width: 32%;
          border-bottom: 1px solid rgba(245, 245, 245);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .el-icon{
            margin-bottom: 5px;
            color: rgba(66,133,244);
            font-size: 2.5vh;
          }
          span{
            font-size: 1.5vh;
          }
          &:hover{
            cursor: pointer;
            background-color: #f0f0f0;
          }
        }
      }
    }
  }
}
.shade{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 800;
  top: 0vh;
  left: 3vw;
  background-color: rgba(0,0,0,.7);
}
.form{
  position: absolute;
  top: 0vh;
  left: 26vw;
  z-index: 950;
  height: 100vh;
  width: 74vw;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(250, 250, 250);
  .form-title{
    text-align: left;
    font-size: 2.2vh;
    font-weight: 600;
    letter-spacing: 1px;
    padding-left: 2vh;
    margin-top: 1vh;
  }
  .leave-form{
    margin-top: 1vh;
    max-height: 84vh;
    margin-bottom: 3vh;
    .el-form{
      padding: 2vh;
      .el-form-items{
        width: 69vw;
        border: 1px solid rgba(238, 238, 238);
        margin: 0 !important;
        //background-color: ;
        height: 8vh;
        align-items:center;
        justify-content: center;
        .el-form-item--default .el-form-item__label {
        }
        :deep(.el-form-item__label-wrap) {
          width: 10vw;
          line-height: 8vh;
          height: 8vh;
          text-align: center;
          box-sizing: border-box;
          border-right: 1px solid rgba(238, 238, 238);
          margin-left: 0 !important;
          &:last-child {
            border-right: none;
          }
        }
        :deep(.el-form-item__label){
          padding: 0 !important;
          margin: auto !important;
        }
        :deep(.el-range-editor.el-input__wrapper){
          width: 45vw;
          margin-left: 3vw;
        }
        :deep(.el-input) {
          width: 46vw !important;
          margin-left: 3vw;
        }
        :deep(.el-textarea ){
          width: 46vw !important;
          margin-left: 3vw;
        }
      }
    }
    .group{
      width: 69vw;
      min-height: 10vh;
      display: flex;
      border-right: 1px solid rgba(238, 238, 238);
      border-left:  1px solid rgba(238, 238, 238);
      .title{
        width: 14.6%;
        min-height: 10vh;
        line-height: 8vh;
        border-right: 1px solid rgba(238, 238, 238);
        box-sizing: border-box;
        text-align: center;
        font-size: 1.5vh;
        color: rgb(96, 98, 102);
      }
      .items{
        width: 86%;
        display: flex;
        flex-direction: column;
        padding: 1vh 1vh 1vh 6.5vh;
        box-sizing: border-box;
        justify-content: space-between;
        background-color: #fff;
        .item{
          margin-top: 1vh;
          display: flex;
          justify-content: left;
        }
      }
    }
    .upload-demo{
      height: 3vh;
      width: 50vw;
      display: flex;
      justify-content: left;
      align-items: center;
      :deep(.el-upload-list ){
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
        position: relative;
        width: 50vw;
      }
    }
  }
}
.close-btn{
  position: absolute;
  top: 15vh;
  left: 24vw;
  height: 9vh;
  width: 3.5vw;
  z-index: 899;
  background-color: rgba(255, 87, 34);
  margin: 1vh auto;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  color: white;
  flex-direction: column;
  padding-left: 0.5vw;
  align-items: start;
  font-size: 1.6vh;
  &:hover{
    cursor: pointer;
  }
}
:deep(.el-form-item--default .el-form-item__content) {
  line-height: 32px;
  height: 8vh;
  background-color: #fff;
}
.upload{
  :deep(.form .leave-form .el-form .el-form-items .el-form-item__label-wrap){
    line-height: 13vh;
    height: 13vh;
  }
  :deep(.el-form-item__content){
    height: 13vh;
  }
}
</style>

